{% extends 'base.html' %}
{% load  static %}

{% block css %}
    <style>
        .account {
            width: 400px;
            border: 1px solid #dddddd;
            border-radius: 5px;
            box-shadow: 5px 5px 20px #aaa;

            margin-left: auto;
            margin-right: auto;
            margin-top: 100px;
            padding: 20px 40px;
        }
    </style>
{% endblock %}

{% block content %}

    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="account">
                    <h2 class="text-center">验证码登录</h2>
                    <form method="post" novalidate>
                        {% csrf_token %}
                        {% for field in form %}
                            <div class="form-group">
                                <label>{{ field.label }}</label>
                                <div class="row">
                                    {% if field.label == '验证码' %}
                                    	<div class="col-xs-6">
                                        {{ field }}
                                        <span class="error_msg" style="color: red">{{ field.errors.0 }}</span>
                                        </div>
                                        <input type="button" value="获取验证码" name="verifi_code" id="zphone" class="btn btn-primary" >
                                    {% else %}
                                        <div class="col-xs-12">
                                        {{ field }}
                                            <span class="error_msg" style="color: red">{{ field.errors.0 }}</span>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        {% endfor %}
                        <div>
                            <button type="submit" id="login_sms" class="btn btn-primary">登 录</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
    <script type="text/javascript">
        var error_mobile;
        $('#zphone').click(function () {
            // 检验手机号是否正确
            check_mobile();
            if (error_mobile){
                return;
            }
            //发送验证码
            $.get('/send_message/', {
                mobile: $('#id_mobile').val()},
                function (msg) {
                if (msg.msg == '提交成功') {
                    alert(msg.code);
                    RemainTime();
                }
            });
        })

        //按钮倒计时
        var iTime = 60;
        sTime = ''

        function RemainTime() {
            if (iTime == 0) {
                document.getElementById('zphone').disabled = false;
                sTime = "获取验证码";
                iTime = 60;
                document.getElementById('zphone').value = sTime;
                return;
            } else {
                document.getElementById('zphone').disabled = true;
                sTime = "重新发送(" + iTime + ")";
                iTime--;
            }
            setTimeout(function () {
                RemainTime()
            }, 1000)
            document.getElementById('zphone').value = sTime;
        }

        // 检查用户输入的手机号是否合法
        function check_mobile() {

            var re = /^1[345678]\d{9}$/; //校验手机号

            if (re.test($('#id_mobile').val())) {
                $('#id_mobile').next().hide();
                error_mobile = false;
            } else {
                $('#id_mobile').next().html('你输入的手机格式不正确')
                $('#id_mobile').next().show();
                error_mobile = true;

            }
        }


    </script>
{% endblock %}





